<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body style="margin:0;padding:0;">
<div style="width: 280px;padding-left: 10px; padding-right: 10px; padding-bottom: 10px; background-color: bisque; font-size: 0.75em;">
    <h4 style="text-align: center;padding-top: 20px;">嗨特购北京怀柔万达店</h4>
    <div style="padding-top: 2px;">
        票号：0001022092111060008
    </div>
    <div style="padding-top: 2px;">
        日期：2023年03月27日 19:41
    </div>
    <div style="width: 100%; padding-top: 2px; clear: both;">
        <div style="width: 50%; float: left;">门店号：0012</div>
        <div style="width: 50%; float: left;">业务：零售销售</div>
    </div>
    <div style="width: 100%; padding-top: 2px; clear: both;">
        <div style="width: 50%; float: left;">收银员：000835</div>
        <div style="width: 50%; float: left;">机号：001202</div>
    </div>
    <div style="width: 100%; padding-top: 2px; clear: both;">
        <div>
            <li style="width: 15%; list-style: none; float: left; ">序</li>
            <li style="width: 15%; list-style: none; float: left;">品名</li>
            <li style="width: 15%; list-style: none; float: left; text-align: center;">单价</li>
            <li style="width: 25%; list-style: none; float: left;">数量</li>
            <li style="width: 30%; list-style: none; float: left; text-align: right">成交价</li>
        </div>
    </div>
    <div style="border-bottom-style: double; clear:both;"></div>
    <div style="width: 100%;padding-top: 2px;">
        <div>
            <span>1</span> 好丽友薯愿薯片（蜂蜜牛奶味）104g
        </div>
        <div>
            20400995
        </div>
        <div style="width: 100%;">
            <div style="width: 33%; float: left; text-align: left">7.30000</div>
            <div style="width: 33%; float: left; text-align: center">2</div>
            <div style="width: 33%; float: left; text-align: right">7.30000</div>
        </div>
    </div>
    <div style="border-top-style: double; clear:both;">
        <div style="width: 100%; clear: both; padding-top: 2px;">
            <div style="width: 15%; float: left;">优惠:</div>
            <div style="width: 30%; padding-right: 5%; float: left; text-align: right;">180.00</div>
            <div style="width: 18%; float: left;">件数:</div>
            <div style="width: 32%; float: left; text-align: right">2</div>
        </div>
        <div style="width: 100%; clear: both; padding-top: 2px;">
            <div style="width: 15%; float: left;">应付:</div>
            <div style="width: 30%; padding-right: 5%; float: left; text-align: right;">3228.00</div>
        </div>
        <div style="width: 100%; clear: both; padding-top: 2px;">
            <div style="width: 15%; float: left;">实付:</div>
            <div style="width: 30%; padding-right: 5%; float: left; text-align: right;">77778.00</div>
            <div style="width: 18%; float: left;">找零:</div>
            <div style="width: 32%; float: left; text-align: right">0.00</div>
        </div>
    </div>
    <div style="border-bottom-style: double; clear: both;"></div>
    <div style="padding-top: 2px;">
        <div>
            <span>购物券：</span> 0.00
        </div>
        <div>
            <span>在线支付-微信：</span> 787888.00
        </div>
    </div>
    <div style="border-bottom-style: double;"></div>
    <div style="padding-top: 2px;">
        <span>会员：</span> 123456
    </div>
    <div>
        <span>本次积分：</span> 8.00
    </div>
    <div style="text-align: center; margin-top: 10px;">谢谢惠顾！欢迎下次光临！</div>
    <div style="text-align: center; margin-top: 30px;">请扫描下方电子发票二维码</div>
    <div style="text-align: center; margin-bottom: 20px;">在一个月内开具发票</div>
    <label for="qrcodeStr"></label><input type="text" name="qrcodeStr" id="qrcodeStr" style="display: none;" value="http://shop.huabeicloud.cn/B2C/invoice_Bw.html?vendorId=17&orderNo=00021051472303300001&timeStamp=1680158882&sign=706"/>
    <div id="qrcode" style="width: 120px; margin:0 auto;"></div>
</div>
</body>
</html>
<script src="../static/qrcode.js"></script>
<script type="text/javascript">
    const qrcode = new QRCode(document.querySelector('#qrcode'), {
        text: "test",
        width: 120,
        height: 120,
        colorDark: "black",
        colorLight: "white",
        correctLevel: QRCode.CorrectLevel.H
    });
    function init() {
        const value = qrcodeStr.value;
        qrcode.clear();
        qrcode.makeCode(value);
    }
    init();
</script>